<template>
  <div class="log">
    <textarea cols="30" ref="text" class="log-window"
      rows="16" :readonly="true"
      v-model="content">
    </textarea>
    <div class="bts">
      <button @click="save_log">保存</button>
      <button @click="clear_log">清空</button>
      <button @click="open_devtools">控制台</button>
    </div>
  </div>
</template>

<script>
import * as types from './types';
let electron = require("electron");
let fs = require("fs");

export default {
  name: 'LogConsole',
  props: ['content', 'evtbus'],
  data() {
    return {
    }
  },
  watch: {
    content(n) {
      this.$nextTick(()=>{
        let t = this.$refs.text;
        t.scrollTop = t.scrollHeight;
      });
    }
  },
  methods: {
    save_log() {
      if(!!!this.content) {
        return;
      }
      // 弹出保存框
      let dialog = electron.remote.dialog;
      const options = {
        title: '保存日志',
        filters: [
          {name: 'Log Files', extensions: ['txt']}
        ]
      }
      dialog.showSaveDialog(options, fname => {
        if(!!fname) {
          // 存入文件
          fs.writeFileSync(fname, this.content);
        }
      });
    },
    clear_log() {
      this.evtbus.$emit(types.CLEAR_LOG);
    },
    open_devtools() {
      electron.remote.getCurrentWindow().toggleDevTools();
    },
  }
}
</script>


<style scoped>
div.log {
  display: flex;
  flex-direction: column;
}
.log-window {
  width: 520px;
  margin-bottom: 10px;
}
</style>
